<style>
	#div_frm_coordinates{
		margin: 0 0 5px 0;
		list-style: none;
		display: table;
	}
	
	#div_frm_coordinates li{
		float: left;
		padding: 3px 0;
		margin: 0 0 0 5px;
	}
	
	#div_get_coordinates{
		border: 1px solid red;
		position: relative;
		width: 740px;
		height: 430px;
		display: table;
	}
	
	#div_point{
		position: absolute;
		border: 1px solid blue;
	}
</style>
<script>
	function showCoords(c){
      	$('#coor_left1').val(c.x);
      	$('#coor_top1').val(c.y);
      	$('#coor_left2').val(c.x2);
      	$('#coor_top2').val(c.y2);
    };

    function clearCoords(){
    	$('#coor_left1').val('');
      	$('#coor_top1').val('');
      	$('#coor_left2').val('');
      	$('#coor_top2').val('');
    };

	function saveCoord(){
		$.ajax({
	  		type: "POST",
	       	url: '<?php echo $this->url(array('action'=>"save-adv")); ?>',
	       	data: {
		       	type		: 'add',
		       	coord_id	: $("#coord_id").val(),
    	       	image_id	: $("#image_id").val(),
    	       	link	: $("#coor_name").val(),
    	       	coor_order	: $("#coor_order").val(),
    	       	x1			: $("#coor_left1").val(),
    	       	y1			: $("#coor_top1").val(),
    	       	x2			: $("#coor_left2").val(),
    	       	y2			: $("#coor_top2").val()
    	    },
	        success: function (data){

	        	window.location.href="<?php echo $this->url(array('action'=>"adv")); ?>";
	        }
		});
	};
	var type = 'add';
	$(document).ready( function(){
		if(type == 'add'){
			$('#target').Jcrop({
				onChange:   showCoords,
		        onSelect:   showCoords,
		        onRelease:  clearCoords,
		        bgOpacity: 0.5,
		        bgColor: 'black'
			});
		}
	});
</script>
<form name="addCoords" id="addCoords" method="post" action="" enctype="multipart/form-data">

	<ul id="div_frm_coordinates">
		<li>
			<label>Link:</label>
			<input type="text" name="link" id="coor_name" value="" />
		</li>
				<li>
			<label>X1:</label>
			<input type="text" name="coor_left1" id="coor_left1" value="" style="width: 25px;" readonly="readonly" />
		</li>
		<li>
			<label>Y1:</label>
			<input type="text" name="coor_top1" id="coor_top1" value="" style="width: 25px;" readonly="readonly" />
		</li>
		<li>
			<label>X2:</label>
			<input type="text" name="coor_left2" id="coor_left2" value="" style="width: 25px;" readonly="readonly" />
		</li>
		<li>
			<label>Y2:</label>
			<input type="text" name="coor_top2" id="coor_top2" value="" style="width: 25px;" readonly="readonly" />
		</li>
		<li>
			<input type="button" name="coor_save" id="coor_save" value="Save" onClick="javascript: saveCoord();" />
			<input type="reset" name="coor_reset" id="coor_reset" value="Reset" />
		</li>
	</ul>
	<div id="div_get_coordinates">
		<img id="target" src="<?php echo FILE_URL.'/adv' ?>/banner4.jpg"  />
	</div>
</form>
<div style="margin-top:20px;margin-left:20px;">
	<form name="upload-form" id="upload-form" action="" method="post" enctype="multipart/form-data">
	<label for="file">Thay đổi hình ảnh:</label>
	<input type="file" name="pictures" id="pictures">
	<input type="submit" name="submit" value="Upload">
	</form>
</div>
<div class="div-table">
                <table width="100%" border="0" class="adminlist">
                <thead>
                	 <tr>
						<th>Link</th>
						<th>Params</th>
						<th>Action</th>
					</tr>
				</thead>
                 <tbody>
					
						<?php if(count($this->Items)){ 
							foreach($this->Items as $val){
							
							$iconDel = '';
							

								$lnkDel  = $this->url(array('action'=>'delete-adv','id'=> $val['id']));
								$options = array('type'=>'submit','name'=>'appForm',
												 'notice'=>$this->translate('Are you sure you want to delete this item?'));
								$iconDel = $this->cmsIcon('Delete item',$lnkDel,array('icon'=>'icon-delete.png'),$options);

							echo "<tr>";
								echo "<td>".$val["link"]."</td>";
								echo "<td>".$val["params"]."</td>";
								echo "<td>".$iconDel."</td>";
							echo "</tr>";	
						 }}?>
                </tbody>
                 
                </table>

                </div>